<template>
  <div style="margin: 15px">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待审核订单" name="notAudit" :key="'notAudit'">
        <notAudit v-if="notAudit"></notAudit>
      </el-tab-pane>
      <el-tab-pane label="待打款订单" name="notPay" :key="'notPay'">
        <notPay v-if="notPay"></notPay>
      </el-tab-pane>
      <el-tab-pane label="已打款订单" name="accomplishPay" :key="'accomplishPay'">
        <accomplishPay v-if="accomplishPay"></accomplishPay>
      </el-tab-pane>
      <el-tab-pane label="已收款订单" name="accomplishReceive" :key="'accomplishReceive'">
        <accomplishReceive v-if="accomplishReceive"></accomplishReceive>
      </el-tab-pane>
      <el-tab-pane label="驳回订单" name="rejectAudit" :key="'rejectAudit'">
        <rejectAudit v-if="rejectAudit"></rejectAudit>
      </el-tab-pane>
      <el-tab-pane label="全部" name="allAudit" :key="'allAudit'">
        <allAudit v-if="allAudit"></allAudit>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import notAudit from '@/views/supplier/settlementAudit/notAudit';
  import notPay from '@/views/supplier/settlementAudit/notPay';
  import accomplishPay from '@/views/supplier/settlementAudit/accomplishPay';
  import accomplishReceive from '@/views/supplier/settlementAudit/accomplishReceive';
  import rejectAudit from '@/views/supplier/settlementAudit/rejectAudit';
  import allAudit from '@/views/supplier/settlementAudit/allAudit';

  export default {
    components: {
      notAudit: notAudit,
      notPay: notPay,
      accomplishPay: accomplishPay,
      accomplishReceive: accomplishReceive,
      rejectAudit: rejectAudit,
      allAudit: allAudit
    },
    data() {
      return {
        activeName: 'notAudit',
        notAudit: true,
        notPay: false,
        accomplishPay: false,
        accomplishReceive: false,
        rejectAudit: false,
        allAudit: false,
      };
    },
    methods: {
      handleClick(tab, event) {
        if (tab.name === 'notAudit') {
          this.notAudit = true
          this.notPay = false
          this.accomplishPay = false
          this.accomplishReceive = false
          this.rejectAudit = false
          this.allAudit = false
        } else if (tab.name === 'notPay') {
          this.notAudit = false
          this.notPay = true
          this.accomplishPay = false
          this.accomplishReceive = false
          this.rejectAudit = false
          this.allAudit = false
        } else if (tab.name === 'accomplishPay') {
          this.notAudit = false
          this.notPay = false
          this.accomplishPay = true
          this.accomplishReceive = false
          this.rejectAudit = false
          this.allAudit = false
        } else if (tab.name === 'accomplishReceive') {
          this.notAudit = false
          this.notPay = false
          this.accomplishPay = false
          this.accomplishReceive = true
          this.rejectAudit = false
          this.allAudit = false
        } else if (tab.name === 'rejectAudit') {
          this.notAudit = false
          this.notPay = false
          this.accomplishPay = false
          this.accomplishReceive = false
          this.rejectAudit = true
          this.allAudit = false
        } else if (tab.name === 'allAudit') {
          this.notAudit = false
          this.notPay = false
          this.accomplishPay = false
          this.accomplishReceive = false
          this.rejectAudit = false
          this.allAudit = true
        }
      },
    }
  };
</script>
